<template>
    <div class="OrderPage">
        <header>
            <div class="selected">
                <span>条件搜索：</span>
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="订单号" value="1"></el-option>
                        <el-option label="产品名" value="2"></el-option>
                        <el-option label="优化师" value="3"></el-option>
                        <el-option label="产品ID" value="4"></el-option>
                        <el-option label="下单IP" value="5"></el-option>
                        <el-option label="域名" value="6"></el-option>
                        <el-option label="邮箱" value="7"></el-option>
                        <el-option label="手机号" value="8"></el-option>
                        <el-option label="下单人" value="9"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="selectList"></el-button>
                </el-input>
            </div>
            <div class="selectedPicker">
                <span>日期筛选：</span>
                <el-date-picker
                        v-model="value2"
                        type="datetimerange"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right">
                </el-date-picker>
            </div>
        </header>
        <el-main class="main">
            <el-table
               ref="filterTable"
               :data="goodsList"
               @row-click="rowClick"
               class="table"
            >
                <!--<el-table-column-->
                        <!--type="expand"-->
                <!--&gt;-->
                    <!--<template slot-scope="scope">-->
                        <!--<el-form label-position="left" inline class="demo-table-expand">-->
                            <!--<el-form-item label="" style="width: 100%">-->
                                <!--<div style="display: flex; width: 100%">-->
                                    <!--<img :src="scope.row.pro_img" alt="" width="150px">-->
                                    <!--<span class="order myorder">-->
                                    <!--<span>{{scope.row.pro_name_admin}}</span>-->
                                    <!--<span>-->
                                        <!--<span>{{scope.row.pro_name_admin}} X {{scope.row.pro_total_money/scope.row.pro_sale_price}}</span>-->
                                        <!--<span style="margin-left: 10px">颜色：黑色 尺码： M</span>-->

                                    <!--</span>-->
                                    <!--<span style="color: red">-->
                                        <!--<span>单价: {{scope.row.pro_sale_price}}</span>-->
                                        <!--<span style="margin-left: 10px">总价: {{scope.row.pro_total_money}} </span>-->

                                    <!--</span>-->
                                <!--</span>-->

                                <!--</div>-->
                            <!--</el-form-item>-->
                        <!--</el-form>-->
                    <!--</template>-->

                <!--</el-table-column>-->
                <el-table-column
                        prop="order_num"
                        label="订单号"
                        width="170"
                        align="center"
                >
                    <template slot-scope="scope">
                    <span class="order">
                    <span>{{scope.row.order_num}}</span>
                    <span class="name">{{scope.row.addtime}}</span>
                    </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pro_id"
                        label="产品ID"
                        width="80"
                        align="center"
                      >
                </el-table-column>
                <el-table-column
                        prop="optimizer"
                        label="优化师"
                        width="100"
                        align="center"
                       >
                </el-table-column>
                <el-table-column
                        prop="player_name"
                        label="下单人"
                        width="140"
                        align="center"
                        >
                    <template slot-scope="scope">
                        <span class="singlepeople">
                            <span style="text-align: center">{{scope.row.player_name}}</span>
                            <span style="color: green">下单IP:{{scope.row.player_ip}}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="player_phone"
                        label="手机"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        prop="player_email"
                        label="邮箱"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        align="center"
                >
                    <template slot-scope="scope">
                        <span>
                            {{scope.row.player_province}}{{scope.row.player_city}}{{scope.row.player_addr}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="player_zip"
                        label="邮编"
                        align="center"
                        >
                </el-table-column>
                <!--<el-table-column-->
                        <!--prop="name"-->
                        <!--width="100"-->
                        <!--align="center"-->
                        <!--label="支付状态"-->
                        <!--:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"-->
                        <!--:filter-method="filterTag"-->
                        <!--filter-placement="bottom-end"-->
                <!--&gt;-->
                    <!--<template slot-scope="scope">-->
                        <!--<span class="order">-->
                            <!--<span>{{scope.row.pay_type}}</span>-->
                            <!--<span style="color: red">{{scope.row.order_msg}}</span>-->

                        <!--</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="name"-->
                        <!--label="短信验证"-->
                        <!--align="center"-->
                <!--&gt;-->
                    <!--<template slot-scope="scope">-->
                        <!--<span class="order">-->
                            <!--<span style="color: red">未通过</span>-->
                        <!--</span>-->
                    <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column
                        prop="check_status"
                        label="审单情况"
                        align="center"
                        >
                    <template slot-scope="scope">
                        <span class="order">
                            <span :style="{
                                color: scope.row.check_status === '未审核' ? 'red' : ''
                            }">{{scope.row.check_status}}</span>
                            <span v-if="scope.row.check_time">{{scope.row.check_time}}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="审单"
                        width="80"
                        align="center"
                        >
                    <template slot-scope="scope">
                        <span class="order">
                             <el-button type="primary" size="mini" @click.stop="clickOrder(scope.row)">审单</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page.sync="page"
                    :page-size="10"
            ></el-pagination>
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="45%"
                    >
               <el-form ref="form"  label-width="120px">
                   <el-form-item label="订单号：">
                       <el-input v-model="form.order_num" disabled></el-input>
                   </el-form-item>
                   <el-form-item label="下单人：">
                       <el-input v-model="form.player_ip"></el-input>
                   </el-form-item>
                   <el-form-item label="电话号码：">
                       <el-input v-model="form.player_phone"></el-input>
                   </el-form-item>
                   <el-form-item label="下单数量：">
                       <el-input v-model="form.pro_num"></el-input>
                   </el-form-item>
                   <el-form-item label="订单金额：">
                       <el-input v-model="form.pro_total_money"></el-input>
                   </el-form-item>
                   <el-form-item label="配送省址：">
                       <el-input v-model="form.player_province"></el-input>
                   </el-form-item>
                   <el-form-item label="配送城市：">
                       <el-input v-model="form.player_city"></el-input>
                   </el-form-item>
                   <el-form-item label="配送区域：">
                       <el-input v-model="form.player_area"></el-input>
                   </el-form-item>
                   <el-form-item label="详细地址：">
                       <el-input v-model="form.player_addr"></el-input>
                   </el-form-item>
                   <el-form-item label="邮政编码：">
                       <el-input v-model="form.player_zip"></el-input>
                   </el-form-item>
                   <el-form-item label="留言备注：">
                       <el-input v-model="form.player_remark"></el-input>
                   </el-form-item>
                   <el-form-item label="邮箱：">
                       <el-input v-model="form.player_email"></el-input>
                   </el-form-item>
                   <el-form-item label="审核意见：">
                       <el-select v-model="form.check_status" placeholder="请选择">
                           <el-option
                                   v-for="item in options"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                           </el-option>
                       </el-select>
                   </el-form-item>
               </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkOrderCheck">确 定</el-button>
  </span>
            </el-dialog>

            <el-dialog
                    title="商品详情"
                    :visible.sync="productDiag"
                    width="45%"
                    >
                <div class="productDiagCont">
                    <img :src="productItem.pro_img" alt="" style="width: 200px">
                    <div class="productDscribe">
                        <span class="proTit">{{productItem.pro_name_admin}}</span>
                        <span class="pro">{{productItem.pro_name_admin}} X {{productItem.pro_num}}</span>
                        <span class="pro_attr">
                            <span v-for="(item, index) in productItem.pro_attr" :key="index" style="margin-bottom: 10px" >
                              <span v-show="!item.attr">  {{item.name}}:{{item.val}}</span>
                                <span v-show="item.attr">
                                    {{item.pro_name_user}} 数量 X {{item.num}}
                                    <span  v-for="(items, idx) in item.attr" :key="idx" >
                                        <span style="padding: 10px; display: block; color: blue"> {{items.name}}:{{items.val}}</span>
                                    </span>
                                </span>
                            </span>
                        </span>
                        <span style="color: red">
                                        <span>单价: {{productItem.pro_sale_price}}</span>
                                        <span style="margin-left: 10px">总价: {{productItem.pro_total_money}} </span>
                                    </span>
                        <span style="margin-top: 15px">留言：{{productItem.player_remark}} </span>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
    <!--<el-button @click="productDiag = false">取 消</el-button>-->
    <el-button type="primary" @click="productDiag = false">确 定</el-button>
  </span>
            </el-dialog>
        </el-main>
    </div>
</template>

<script>
    import Service from "../../services/main";
    export default {
        name: "Order",
        data() {
            return {
                productItem: {},
                productDiag: false,
                id: '',
                total: 20,
                red: 'red',
                start_time: '',
                end_time: '',
                order_num: '',
                pro_name_admin: '',
                optimizer: '',
                pro_id: '',
                player_ip: '',
                player_name: '',
                domain: '',
                player_email: '',
                player_phone: '',
                page: 1,
                options: [{
                    value: '0',
                    label: '未审核'
                },
                    {
                    value: '1',
                    label: '有效单'
                }, {
                    value: '2',
                    label: '无效单'
                }, {
                    value: '3',
                    label: '恶意单'
                }, {
                    value: '4',
                    label: '重复单'
                }, {
                    value: '5',
                    label: '暂存单'
                }],
                value: '',
                form: {
                },
                dialogVisible: false,
                select: '',
                input3: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '',
                myvalue: '',
                goodsList: [
                ]
            }
        },
        created () {
            this.getList();
        },
        watch: {
            select(val) {
                if (val) {
                    this.input3 = '';
                    this.order_num = '';
                    this.pro_name_admin = '';
                    this.optimizer = '';
                    this.pro_id = '';
                    this.player_ip = '';
                    this.domain = '';
                    this.player_email = '';
                    this.player_phone = '';
                    this.player_name = '';
                }
            },
            value2(val) {
                const d = new Date(val[0]);
                const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())

                const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
                this.start_time = resDate + ' ' + resTime;
                const h = new Date(val[1]);
                const strDate = h.getFullYear() + '-' + this.p((h.getMonth() + 1)) + '-' + this.p(h.getDate())

                const strTime = this.p(h.getHours()) + ':' + this.p(h.getMinutes()) + ':' + this.p(h.getSeconds())
                this.end_time = strDate + ' ' + strTime;
                console.log(this.start_time, this.end_time);
                this.getList();
            }
        },
        methods: {
            rowClick(row) {
               this.productDiag = true;
               this.productItem = row;
            },
            p(s) {
                return s < 10 ? '0' + s : s
            },
            getList() {
                let params = {
                    start_time: this.start_time,
                    end_time: this.end_time,
                    order_num: this.order_num,
                    pro_name_admin: this.pro_name_admin,
                    optimizer: this.optimizer,
                    pro_id: this.pro_id,
                    player_ip: this.player_ip,
                    player_name: this.player_name,
                    domain: this.domain,
                    player_email: this.player_email,
                    player_phone: this.player_phone,
                    page: this.page,
                }
                Service.orderList(this, params).then(res => {
                    this.goodsList = res.result.list;
                    this.total = res.result.total;
                })
            },
            selectList() {
                switch (this.select) {
                    case '1':
                       this.order_num =  this.input3;
                       break;
                    case '2':
                        this.pro_name_admin = this.input3;
                        break;
                    case '3':
                        this.optimizer = this.input3;
                        break;
                    case '4':
                        this.pro_id = this.input3;
                        break;
                    case '5':
                        this.player_ip = this.input3;
                        break;
                    case '6':
                        this.domain = this.input3;
                        break;
                    case '7':
                        this.player_email = this.input3;
                        break;
                    case '8':
                        this.player_phone = this.input3;
                        break;
                    case '9':
                        this.player_name = this.input3;
                        break;
                }
                this.getList();
            },
            clickOrder(item) {
                console.log(item);
                this.id = item.id;
                this.form = JSON.parse(JSON.stringify(item));
                switch (item.check_status) {
                    case '未审核':
                        this.form.check_status = '0';
                        break;
                    case '有效单':
                        this.form.check_status = '1';
                        break;
                    case '无效单':
                        this.form.check_status = '2';
                        break;
                    case '恶意单':
                        this.form.check_status = '3';
                        break;
                    case '重复单':
                        this.form.check_status = '4';
                        break;
                    case '暂存单':
                        this.form.check_status = '5';
                        break;
                }
                this.dialogVisible = true;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getList();
            },
            checkOrderCheck() {
                let info = {
                    order_num: this.form.order_num,
                    player_ip: this.form.player_ip,
                    player_phone: this.form.player_phone,
                    pro_num: this.form.pro_num,
                    pro_total_money: this.form.pro_total_money,
                    player_province: this.form.player_province,
                    player_city: this.form.player_city,
                    player_area: this.form.player_area,
                    player_addr: this.form.player_addr,
                    player_zip: this.form.player_zip,
                    player_remark: this.form.player_remark,
                    player_email: this.form.player_email,
                    check_status: this.form.check_status,
                    id: this.id,
                }
                let params = {
                    info: info
                }
                Service.orderCheck(this, params).then(res => {
                    if (res.errorCode === 0) {
                        this.dialogVisible = false;
                        this.getList();
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
    .OrderPage {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    header {
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        /*justify-content: space-around;*/
        span {
            width: 100px;
        }
        .selected {
            width:500px;
            display: flex;
            align-items: center;
            .el-select {
                width: 120px;
            }
        }
        .myselected {
            width:500px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        .selectedPicker {
            width:500px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
    }
    .main {
        flex: auto;
        .order {
            display: flex;
            flex-direction: column;
        }
        .table {
            height: 90%;
            overflow: auto;
        }
        .myorder {
            margin-left: 10px;
            justify-content: space-evenly;
        }
        .name {
            color: #aaa;
        }
        .el-form--inline .el-form-item__content {
            width: 100%;
        }
        .singlepeople {
            display: flex;
            flex-direction: column;
        }
    }
    .productDiagCont {
        display: flex;
        align-items: center;
        .productDscribe {
            display: flex;
            flex-direction: column;
            padding: 10px;
        }
        .proTit {
            color: #aaa;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .pro {
            color: #666;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .pro_attr {
            color: rgb(247, 171, 0);
            display: flex;
            flex-direction: column;
        }
    }
</style>
